"use strict";
import { Observer } from '../common/Observer'
import pxmu from 'pxmu'


// var canvas = document.getElementById('canvas'),
//   ctx = canvas.getContext('2d'),
//   w = canvas.width = window.innerWidth,
//   h = canvas.height = window.innerHeight,

//   hue = 217,
//   stars = [],
//   count = 0,
//   maxStars = 2500;//星星数量

// var canvas2 = document.createElement('canvas'),
//   ctx2 = canvas2.getContext('2d');
// canvas2.width = 100;
// canvas2.height = 100;
// var half = canvas2.width / 2,
//   gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
// gradient2.addColorStop(0.025, '#CCC');
// gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
// gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
// gradient2.addColorStop(1, 'transparent');

// ctx2.fillStyle = gradient2;
// ctx2.beginPath();
// ctx2.arc(half, half, half, 0, Math.PI * 2);
// ctx2.fill();

// // End cache

// function random(min, max) {
//   if (arguments.length < 2) {
//     max = min;
//     min = 0;
//   }

//   if (min > max) {
//     var hold = max;
//     max = min;
//     min = hold;
//   }

//   return Math.floor(Math.random() * (max - min + 1)) + min;
// }

// function maxOrbit(x, y) {
//   var max = Math.max(x, y),
//     diameter = Math.round(Math.sqrt(max * max + max * max));
//   return diameter / 2;
//   //星星移动范围，值越大范围越小，
// }

// var Star = function () {

//   this.orbitRadius = random(maxOrbit(w, h));
//   this.radius = random(60, this.orbitRadius) / 18;
//   //星星大小
//   this.orbitX = w / 2;
//   this.orbitY = h / 2;
//   this.timePassed = random(0, maxStars);
//   this.speed = random(this.orbitRadius) / 500000;
//   //星星移动速度
//   this.alpha = random(2, 10) / 10;

//   count++;
//   stars[count] = this;
// }

// Star.prototype.draw = function () {
//   var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
//     y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
//     twinkle = random(10);

//   if (twinkle === 1 && this.alpha > 0) {
//     this.alpha -= 0.05;
//   } else if (twinkle === 2 && this.alpha < 1) {
//     this.alpha += 0.05;
//   }

//   ctx.globalAlpha = this.alpha;
//   ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
//   this.timePassed += this.speed;
// }

// for (var i = 0; i < maxStars; i++) {
//   new Star();
// }

// function animation() {
//   ctx.globalCompositeOperation = 'source-over';
//   ctx.globalAlpha = 0.5; //尾巴
//   ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
//   ctx.fillRect(0, 0, w, h)

//   ctx.globalCompositeOperation = 'lighter';
//   for (var i = 1, l = stars.length; i < l; i++) {
//     stars[i].draw();
//   };

//   window.requestAnimationFrame(animation);
// }

// animation();


// 获取元素 
let demo = document.getElementById("demo");
let closeBtn = document.getElementById("closeBtn");
let loginusername = document.getElementById("loginusername")
let loginpassword = document.getElementById("loginpassword")
let loginBtn = document.getElementById("loginBtn")
let loginEmpty = document.getElementById("loginEmpty")
let content = document.querySelector('#content')

// 通过观察者模式 注册一个展开登录界面的事件
Observer.on("login-show", function () {
  demo.classList.remove('d-none')
})

// 通过观察者模式 注册一个隐藏登录界面的事件
Observer.on("login-hide", function () {
  demo.classList.add("d-none")
})

Observer.on('content-hide', function () {
  content.classList.add('d-none')
})
Observer.on('content-show', function () {
  content.classList.remove('d-none')
})


// 关闭按钮点击事件
closeBtn.onclick = function () {
  // 隐藏登录面板
  Observer.emit("login-hide")
      // 显示首页
  Observer.emit('content-show')
  document.body.style.background=''
      // 后退
  location.href = "/";
}

// 登录按钮点击事件
loginBtn.onclick = async function () {
  // 获取用户名
  let username = loginusername.value;
  if (!/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(username)) {
    pxmu.fail("用户名不符合需求：字母开头，允许5-16字节，允许字母数字下划线")
    return
  }
  // 获取密码
  let password = loginpassword.value;
  if (!/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(password)) {
    pxmu.fail("密码不符合需求：字母开头，允许5-16字节，允许字母数字下划线")
    return;
  }
  // 发送请求cc


  // 发送请求  登录
  let obj = await fetch("/guyun/login", {
    method: "post",
    headers: {
      "Content-type": "application/x-www-form-urlencoded"
    },
    body: "username=" + username + "&password=" + password
  })
  // 解构返回的数据
  let { error, data, token } = await obj.json()

  // 判断是否成功
  if (error === 0) {
    pxmu.success(data)
    console.log('登陆成功');
    Observer.emit('content-show')
    // 把返回的token存起来
    localStorage.setItem("token", token);
    Observer.emit("login-hide")
    // 通知头部
    Observer.emit("getUserInfo")
    return;
  }
  // 如果失败了 
  pxmu.fail(data);
}